<!--头部导航-->

<template>
    <div class="hand">

        <!-- 导航标签-->
        <div class="hand1">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: 'home' }"><span style="color: #757575">首页</span></el-breadcrumb-item>
                <el-breadcrumb-item>{{ $route.meta.title }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <!-- 搜索框-->
        <div class="hand2 flex-center">
            <el-input v-if="data.searchStatus" style="max-width: 22vw;" v-model="data.inputSearch" class="w-50 m-1"
                      placeholder="Type something" :prefix-icon="Search"/>
            <el-date-picker
                    v-model="data.dataTimeValue"
                    v-if="data.dataTimeStatus"
                    type="daterange"
                    style="margin-left: 5px;max-width: 22vw;"
                    range-separator="-"
                    start-placeholder="Start date"
                    end-placeholder="End date"
                    @change="dataTimeValueFun(data.dataTimeValue)"
                    size="default"
            />
        </div>

        <!-- 文件添加按钮和设置-->
        <div class="hand3">


            <el-button v-if="data.fileAddStatus" type="primary" class="hand-el-btn" @click="openFileDialog()">新增
            </el-button>
            <el-button v-if="data.officialWebsite" type="primary" class="hand-el-btn" @click="openOfficialWebsite()">
                新增
            </el-button>


            <el-dropdown>
				<span class="el-dropdown-link">
					<el-icon>
						<Setting/>
					</el-icon>设置
				</span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>关于我们</el-dropdown-item>
                        <el-dropdown-item>版本更新</el-dropdown-item>
                        <el-dropdown-item>
                            <el-popconfirm
                                    width="220"
                                    confirm-button-text="退出"
                                    cancel-button-text="取消"
                                    :icon="InfoFilled"
                                    icon-color="#626AEF"
                                    title="是否确认退出登录？"
                                    @confirm="exitLogin()"
                            >
                                <template #reference>退出登录</template>
                            </el-popconfirm>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>

  <!--文件组件-->
    <div v-if="data.openFileDialog">
        <file-dialog :file-list="data.fileList" @receiveFile="receiveFile"/>
    </div>

  <!--综合站点组件-->
    <div v-if="data.openOfficialWebsiteDialog">
        <official-website-dialog :website-list="data.websiteList" @receiveWebsite="receiveWebsite"/>
    </div>

</template>

<script setup>
import {Calendar, Search} from '@element-plus/icons-vue'
import {ref, onMounted, watch} from 'vue'
import {navSiderStore} from "../store/navSider";
import FileDialog from "./fileDialog.vue";
import {InfoFilled} from '@element-plus/icons-vue'
import router from "../router";
import OfficialWebsiteDialog from "./officialWebsiteDialog.vue";
import moment from "moment/moment";
import {inject} from 'vue'

/**
 * @param{数据源}}
 */
let data = ref({
    searchStatus: navSiderStore().searchStatus,//搜索框状态
    fileAddStatus: navSiderStore().fileAddStatus,//文件添加状态
    officialWebsite: navSiderStore().officialWebsite,//官网按钮状态
    dataTimeStatus: navSiderStore().dataTimeStatus,//日期范围显示
    inputSearch: '',//搜索值
    fileList: '',//文件列表
    openFileDialog: false,//文件模态是否展开
    openOfficialWebsiteDialog: false,//综合站点
    websiteList: '',//综合站点
    dataTimeValue: [],//日期范围
})
/**
 * @type{{监听事件}}
 * @param{{搜索}
 */
watch(() =>
        //搜索值
        data.value.inputSearch, (newValue, oldValue) => {
        navSiderStore().setDataTimeValue([null, null]);
        navSiderStore().setInputSearchValue(newValue);
        reload();
    }
)


onMounted(() => {
})
/**
 * @type{{文件}}
 * @param{{打开(文件)组件,并传值}}
 */
const openFileDialog = () => {
    data.value.fileList = false
    data.value.openFileDialog = true
}
/**
 * @type{{时间}}
 * @param{{时间段筛选}}
 */
function dataTimeValueFun(e) {
	navSiderStore().setDataTimeValue(e);
	navSiderStore().setInputSearchValue(null);
	reload();//重载
}
/**
 * @type{{文件}}
 * @param{{接收(文件)组件传过来的值}}
 */
const receiveFile = (e) => {
    if (e == false) {
        data.value.openFileDialog = false
    }//销毁组件
    else {
        //console.log(e)
        data.value.openFileDialog = false
    }
}

/**
 * @type{{综合站点}}
 * @param{{打开组件,并传值}}
 */
function openOfficialWebsite() {
    data.value.websiteList = false;//传过去的值
    data.value.openOfficialWebsiteDialog = true;//打开组件
}

/**
 * @type{{综合站点}}
 * @param{{接收组件返回的数据}}
 */
function receiveWebsite(e) {
    if (e == false) {
        data.value.openOfficialWebsiteDialog = false
    }//销毁组件
    else {
        data.value.openOfficialWebsiteDialog = false
    }
}

/**
 * @param{{退出登录}}
 */
const exitLogin = () => {
    localStorage.removeItem('token')
    localStorage.removeItem('openid')
    localStorage.removeItem('my_user')
    router.push('/')
}

/**
 * 调用home.vue重载方法
 */
const reload = inject('reload2')

</script>

<style scoped>
.hand {
    height: 7vh;
    display: flex;
    justify-content: flex-end;
    min-width: 60vw;
    align-items: center;
    padding: 0 10px 0 10px;
    border-bottom: rgba(114, 74, 155, 0.2) 1px solid;
}

.hand1 {
    width: 30vw;
    margin-left: 20px;
}

.hand2 {
    width: 52vw;
    height: 7vh;

}

.hand3 {
    width: 23vw;
    height: 7vh;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 10px;

}

.hand-el-btn {
    margin-right: 20px
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}


</style>
